<template>
  <common-page title="注册新账号">
    <el-steps :active="stepActive" simple finish-status="success">
      <el-step title="基础信息" />
      <el-step title="详细信息" />
      <el-step title="完成注册" />
    </el-steps>
    <el-form
      v-if="stepActive == 0"
      ref="stepForm_0"
      :model="form"
      :rules="rules"
      :label-width="120"
    >
      <el-form-item label="登录账号" prop="user">
        <el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
        <div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          show-password
          placeholder="请输入登录密码"
        ></el-input>
        <sc-password-strength v-model="form.password"></sc-password-strength>
        <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input
          v-model="form.password2"
          type="password"
          show-password
          placeholder="请再一次输入登录密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="agree">
        <el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox
        ><span class="link" @click="showAgree = true">《平台服务协议》</span>
      </el-form-item>
    </el-form>
    <el-form
      v-if="stepActive == 1"
      ref="stepForm_1"
      :model="form"
      :rules="rules"
      :label-width="120"
    >
      <el-form-item label="真实姓名" prop="userName">
        <el-input
          v-model="form.userName"
          placeholder="请输入真实姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
      </el-form-item>
      <el-form-item label="账号类型" prop="userType">
        <el-radio-group v-model="form.userType">
          <el-radio-button label="1">企业开发者</el-radio-button>
          <el-radio-button label="2">企业开发者</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开通类别" prop="open">
        <el-checkbox-group v-model="form.open">
          <el-checkbox label="1">云存储API</el-checkbox>
          <el-checkbox label="2">云检索API</el-checkbox>
          <el-checkbox label="3">Javescript API</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div v-if="stepActive == 2">
      <el-result
        icon="success"
        title="注册成功"
        sub-title="可以使用登录账号以及手机号登录系统"
      >
        <template #extra>
          <el-button type="primary" @click="goLogin">前去登录</el-button>
        </template>
      </el-result>
    </div>
    <el-form style="text-align: center">
      <el-button v-if="stepActive > 0 && stepActive < 2" @click="pre"
        >上一步</el-button
      >
      <el-button v-if="stepActive < 1" type="primary" @click="next"
        >下一步</el-button
      >
      <el-button v-if="stepActive == 1" type="primary" @click="save"
        >提交</el-button
      >
    </el-form>
    <el-dialog
      v-model="showAgree"
      title="平台服务协议"
      :width="800"
      destroy-on-close
    >
      平台服务协议
      <template #footer>
        <el-button @click="showAgree = false">取消</el-button>
        <el-button
          type="primary"
          @click="
            showAgree = false;
            form.agree = true;
          "
          >我已阅读并同意</el-button
        >
      </template>
    </el-dialog>
  </common-page>
</template>

<script>
import scPasswordStrength from "@/components/scPasswordStrength";
import commonPage from "./components/commonPage";

export default {
  components: {
    commonPage,
    scPasswordStrength,
  },
  data() {
    return {
      stepActive: 0,
      showAgree: false,
      form: {
        user: "",
        password: "",
        password2: "",
        agree: false,
        userName: "",
        email: "",
        userType: "1",
        open: [],
      },
      rules: {
        user: [{ required: true, message: "请输入账号名" }],
        password: [{ required: true, message: "请输入密码" }],
        password2: [
          { required: true, message: "请再次输入密码" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
          },
        ],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请阅读并同意协议"));
              } else {
                callback();
              }
            },
          },
        ],
        userName: [{ required: true, message: "请输入真实姓名" }],
        email: [{ required: true, message: "请输入邮箱地址" }],
        userType: [{ required: true, message: "请选择账户类型" }],
        open: [{ required: true, message: "请选择开通类别" }],
      },
    };
  },
  mounted() {},
  methods: {
    pre() {
      this.stepActive -= 1;
    },
    next() {
      const formName = `stepForm_${this.stepActive}`;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.stepActive += 1;
        } else {
          return false;
        }
      });
    },
    save() {
      const formName = `stepForm_${this.stepActive}`;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.stepActive += 1;
        } else {
          return false;
        }
      });
    },
    goLogin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>
